<template>
  <el-container style="height: 100%;width: 100%">
    <el-main>
      <el-row :gutter="20" style="width: 100%;height: 100%;">
        <el-col :span="3" style="height: 100%">
          <el-container class="panal">
            <el-main style="padding: 0">
              <el-row style="padding-left: 20px;border-top: 1px solid rgba(7,118,181,.7);line-height: 40px;font-size: 16px;font-weight: 300">
                <el-radio-group v-model="radio1">
                  <el-radio-button  label="统计总览" style="margin-top: 20px" @click.native="showPage(0)"></el-radio-button>
                  <el-radio-button label="客户总览" style="margin-top: 20px" @click.native="showPage(1)"></el-radio-button>
                  <el-radio-button label="打款记录" style="margin-top: 20px" @click.native="showPage(2)"></el-radio-button>
                  <el-radio-button label="定价记录" style="margin-top: 20px"@click.native="showPage(3)"></el-radio-button>
                  <el-radio-button label="历史记录" style="margin-top: 20px"@click.native="showPage(4)"></el-radio-button>
                </el-radio-group>
              </el-row>
            </el-main>
          </el-container>
        </el-col>
        <el-col :span="21" style="height: 100%">
          <xsManinPage v-show="showPages[0]"></xsManinPage>
          <customerManage v-show="showPages[1]" ></customerManage>
          <payRecord v-show="showPages[2]"></payRecord>
          <djRecord v-show="showPages[3]"></djRecord>
          <historyRecord v-show="showPages[4]"></historyRecord>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
  import customerManage from './customerManage.vue'
  import payRecord from './payRecord.vue'
  import djRecord from "./djRecord";
  import historyRecord from "./historyRecord";
  import xsManinPage from "./xsManinPage";
  export default {
    name: 'index',
    components:{
      customerManage,
      payRecord,
      djRecord,
      historyRecord,
      xsManinPage

    },
    data() {
      return {
        radio1:"",
        radio2:"",
        selfVisual:false,
        selftTitle:"",
        monthSaleTitle:"",
        monthSaleVisual:false,
        dkje:0,
        monthProTitle:"",
        monthProVisual:false,
        listClientInfo:[],
        clientInfoTotal:0,
        dkTotal:0,
        djTotal:0,
        xsTotal:0,
        loading:false,
        dkjlList:[],
        payData:[],
        djList:[],
        xsHistoryList:[],
         showPages:[true,false,false,false,false],
        queryDkParams: {
          size:20,
          current: 1,
          customerName:""
        },
        queryDjParams: {
          size:20,
          current: 1,
          customerName:"",
          materialName:"",
          time:""
        },
        queryClientInfoParams:{
          current: 1,
          size: 20,
          cltName:""

        },
        queryXsInfoParams:{
          current: 1,
          size: 20,
          customerName:""
        }
      }
    },
    methods:{
      showPage(jlxx){
           this.showPages=[false,false,false,false,false];
           this.showPages[jlxx]=true;
      },


    }
  }
</script>

<style scoped>
  .panal{
    width: 100%;
    height: 100%;
    background: url("../../../assets/bi/imgs/panel.png") no-repeat center;
    background-size: 100% 100%;
  }
  table, th, td {
    border: 1px solid #368AB6;
    border-collapse: collapse;
  }

</style>
